<div class="content-heading">
   <div class="pull-right text-center">
        <div sparkline data-bar-color="#cfdbe2" data-height="20" data-bar-width="3" data-bar-spacing="2" values="1,0,4,9,5,7,8,9,5,7,8,4,7"></div>
   </div>
   Flot charts
</div>
<div class="container-fluid">
   <!-- START row-->
   <div class="row">
      <div class="col-lg-6">
         <div class="panel panel-default" id="panelChart1">
            <div class="panel-heading">
               <div class="panel-title">Area</div>
            </div>
            <div class="panel-wrapper">
               <div class="panel-body">
                  <div flot [dataset]="areaData" [options]="areaOptions" height="300" (ready)="ready($event)"></div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-6">
         <div class="panel panel-default" id="panelChart9">
            <div class="panel-heading">
               <div class="panel-title">Area Spline</div>
            </div>
            <div class="panel-wrapper">
               <div class="panel-body">
                  <div flot [dataset]="splineData" [options]="splineOptions" height="300"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- END row-->
   <!-- START row-->
   <div class="row">
      <div class="col-lg-6">
         <div class="panel panel-default" id="panelChart2">
            <div class="panel-heading">
               <div class="panel-title">Bar</div>
            </div>
            <div class="panel-wrapper">
               <div class="panel-body">
                  <div flot [dataset]="barData" [options]="barOptions" height="300"></div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-6">
         <div class="panel panel-default" id="panelChart3">
            <div class="panel-heading">
               <div class="panel-title">Bar - Stacked</div>
            </div>
            <div class="panel-wrapper">
               <div class="panel-body">
                  <div class="indicator show">
                     <span class="spinner"></span>
                  </div>
                  <div flot [dataset]="barStackeData" [options]="barStackedOptions" height="300"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- END row-->
   <!-- START row-->
   <div class="row">
      <div class="col-lg-12">
         <div class="panel panel-default" id="panelChart4">
            <div class="panel-heading">
               <div class="panel-title">Real Time <small>(30ms)</small></div>
            </div>
            <div class="panel-wrapper">
               <div class="panel-body">
                  <div flot [dataset]="realTimeData" [options]="realTimeOptions" height="300"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- END row-->
   <!-- START row-->
   <div class="row">
      <div class="col-lg-12">
         <div class="panel panel-default" id="panelChart4">
            <div class="panel-heading">
               <div class="panel-title">Line</div>
            </div>
            <div class="panel-wrapper">
               <div class="panel-body">
                  <div flot [dataset]="lineData" [options]="lineOptions" height="300"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- END row-->
   <!-- START row-->
   <div class="row">
      <div class="col-md-6">
         <div class="panel panel-default" id="panelChart5">
            <div class="panel-heading">
               <div class="panel-title">Pie</div>
            </div>
            <div class="panel-wrapper">
               <div class="panel-body">
                  <div flot [dataset]="pieData" [options]="pieOptions" height="300"></div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-6">
         <div class="panel panel-default" id="panelChart6">
            <div class="panel-heading">
               <div class="panel-title">Donut</div>
            </div>
            <div class="panel-wrapper">
               <div class="panel-body">
                  <div flot [dataset]="donutData" [options]="donutOptions" height="300"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- END row-->
</div>
